<template>
  <div>
    <el-card shadow="never" class="card">
      <el-form ref="form" :model="page" inline>
        <el-form-item label="订单编号:">
          <el-input v-model="page.orderNo" class="elinput1" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="选择日期:">
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="～"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-button type="primary" class="inquire" icon="el-icon-search" size="small" @click="inquire">查询</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <el-card shadow="never">
      <el-table
        :data="queryList"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column
          prop="orderNo"
          label="订单编号"
          width="260"
        />
        <el-table-column
          prop="skuName"
          label="商品名称"
        />
        <el-table-column
          prop="jiage"
          label="订单金额（元）"
        />
        <el-table-column
          prop="innerCode"
          label="设备编号"
        />
        <el-table-column
          prop="zhuangtai"
          label="订单状态"
        />
        <el-table-column
          prop="createTime"
          label="订单日期"
        />
        <el-table-column label="操作" width="80">
          <template #default="{row}">
            <el-link type="primary" @click="detail(row)">查看详情</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pageIndex"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 查看详情 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="37%"
    >
      <div>
        <div class="headbox">
          <div class="imgbox"><img src="../assets/avatar.png" alt="">        <span>出货成功了哦～～</span></div>

        </div>
        <el-row>
          <el-col :span="12">订单编号：{{ addrow.orderNo }}</el-col>
          <el-col :span="12">商品名称：{{ addrow.skuName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12">设备编号：{{ addrow.innerCode }}</el-col>
          <el-col :span="12">订单金额：{{ addrow.jiage }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12">完成时间：{{ addrow.updateTime }}</el-col>
          <el-col :span="12">创建时间：{{ addrow.createTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12">设备地址：{{ addrow.dizhi }}</el-col>
          <el-col :span="12">支付方式：{{ addrow.zhifu }}</el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { orderManagementAPI } from '@/api/other.js'
export default {
  data() {
    return {
      page: {
        orderNo: '',
        startDate: '',
        endDate: '',
        pageIndex: 1,
        pageSize: 10
      },
      time: [],
      queryList: [],
      totalCount: null,
      dialogVisible: false,
      addrow: {

      }
    }
  },
  created() {
    this.getorderManagementAPI()
  },
  methods: {
    inquire() {
      if (this.time === []) {
        this.page.startDate = ''
        this.page.endDate = ''
      } else {
        this.page.startDate = dayjs(this.time[0]).format('YYYY-MM-DD')
        this.page.endDate = dayjs(this.time[1]).format('YYYY-MM-DD')
      }
      if (this.page.startDate === '2022-10-24' && this.page.endDate === '2022-10-24') {
        this.page.startDate = ''
        this.page.endDate = ''
      }
      console.log(this.page.startDate)
      console.log(this.page.endDate)
      console.log(this.page)
      this.getorderManagementAPI()
    },
    async getorderManagementAPI() {
      const res = await orderManagementAPI(this.page)
      this.queryList = res.currentPageRecords
      this.totalCount = res.totalCount - 0
      this.queryList.forEach(item => {
        item.jiage = `${(item.price / 100).toFixed(2)}¥`
        item.createTime = item.createTime.replace(/T/g, ' ')
        item.updateTime = item.updateTime.replace(/T/g, ' ')
        item.dizhi = item.addr.substring(12, 99)
        if (item.status === 0) {
          item.zhuangtai = '创建'
        } else if (item.status === 1) {
          item.zhuangtai = '支付完成'
        } else if (item.status === 2) {
          item.zhuangtai = '出货成功'
        } else {
          item.zhuangtai = '出货失败'
        }
        if (item.payType === '1') {
          item.zhifu = '支付宝'
        } else {
          item.zhifu = '微信支付'
        }
      })
      console.log(this.queryList)
    },
    // 分页
    handleSizeChange(newSize) {
      this.page.pageSize = newSize
      this.getorderManagementAPI()
    },
    handleCurrentChange(newNum) {
      this.page.pageIndex = newNum
      this.getorderManagementAPI()
    },
    detail(row) {
      console.log(row)
      this.addrow = row
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 15px;
  height: 85px;

}
.el-btn {
  margin-bottom: 15px;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  height: 36px;
}
.elinput1{
  width: 200px;
   height: 30px;
   line-height: 20px;
   margin-right: 20px;
   ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
   }
}
.inquire{
  background-color: #5f84ff !important;
  height: 30px;
  // width: 70px;
  margin-left: 20px;
}
.el-date-editor{
  height: 30px !important;
  line-height: 30px !important;
  margin-top: 5px;
::v-deep .el-input__icon{
  line-height: 20px;
}
::v-deep .el-range-separator{
  line-height: 20px;
}
}
.headbox{
  align-items: center;
    height: 54px;
    margin-bottom: 30px;
    background-color: hsla(0,0%,92.5%,.39);
  //  overflow: hidden;

    // width: 300px;
    // display: flex;
    // justify-content: space-evenly;
    .imgbox{
      width: 204px;
      height: 54px;
      img{
        width: 54px;
        height: 100%;
        border-radius: 50px;
        float: left;
        margin-right: 15px;
      }
     span{
     line-height: 54px;
     }
    }

}
.el-col{
      margin-top: 15px;
      font-size: 14px;
    }

</style>
